<template>
  <div>
    <van-nav-bar title="首页" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-row>类别:
      <van-button v-for="(item, i) in glst" :key="i" size="mini" @click="lei(item.id)">{{item.name}}</van-button>
    </van-row>

    <van-row>标签:
      <van-button v-for="(item, i) in taglist" :key="i" size="mini" @click="biao(item.id)">{{item.name}}</van-button>
    </van-row>
<p></p>
    <van-row>
      <van-col span="12">
        <van-button @click="yi" type="primary" size="small" color="linear-gradient(to right, #ff6034, #B949BF,#8EBF8F)">已上线</van-button>
        <van-button @click="wei" type="info" size="small" color="linear-gradient(to right, #ff6034, #B949BF,#8EBF8F)">即将上线</van-button>
      </van-col>
      <van-col span="12" style="text-align: right">
        <van-button @click="xin" type="primary" size="small" color="linear-gradient(to right, #ff6034, #B949BF,#8EBF8F)">最新</van-button>
        <van-button @click="re" type="info" size="small" color="linear-gradient(to right, #ff6034, #B949BF,#8EBF8F)">最热</van-button>
      </van-col>
    </van-row>
    <div v-for="(i,item) in tlist" :key="item">
      <van-card
      :thumb="i.url"
      :desc="i.descrip"
      :title="i.name"
      :key="item"
      :price="tcount"
      :num="i.views"
    />
    <van-button v-if="i.ctype==1" @click="buy(i.id)" icon="cart-o" type="info" size="small">购买</van-button>
    <van-button @click="tiao(i.id)" color="#7232dd"  icon="exchange" plain size="small">详情</van-button>
    </div>
   
    <van-pagination
      v-model="currentPage"
      :total-items="total"
      :items-per-page="page_size"
      @change="getcourse"
    />
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">课程</van-tabbar-item>
      <van-tabbar-item icon="search">路径</van-tabbar-item>
      <van-tabbar-item icon="friends-o">讨论区</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
    
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      // active1: 0,
      active: 0,
      currentPage: 1,
      // 标签
      taglist: [],
      // 课程
      tlist: [],
      // 类别
      glst: [],
      // page:1,
      page_size:2,
      tpages:0,
      total:0,
      typeid:0,
      tagid:0,
      is_publish:0,
      orderbyid:0
    };
  },
  methods: {
    lei(id){
        this.typeid=id
        this.getcourse(1)
    },
    biao(id){
      this.tagid=id
      this.getcourse(1)
    },
    yi(){
      this.is_publish=1
      this.getcourse(1)
    },
    wei(){
      this.is_publish=2
      this.getcourse(1)
    },
    xin(){
      this.orderbyid=1
      this.getcourse(1)
    },
    re(){
      this.orderbyid=2
      this.getcourse(1)
    },
    buy(id){
      var data={"userid":localStorage.getItem("userid"),"goodsid":id}
      this.axios.post("addcart",data)
      .then(res=>{
        alert(res.data.msg)
        this.$router.push("/carts")
      })
    },
    
    getcourse(page){
      // this.page=page
      this.axios.get("/getHomeCourse?page="+page+"&type="+this.typeid+"&tagid="+this.tagid+"&is_publish="+this.is_publish+"&orderbyid="+this.orderbyid)
      .then(res=>{
        // console.log(res)
        this.glst=res.data.typelist
        this.taglist=res.data.taglist
        this.tlist=res.data.courselist
        this.total=res.data.total
        this.page_size=res.data.page_size
      })
    },
    tiao(id){
      this.$router.push({name:'Detail',params:{'id':id}})
    }
    
  },
  mounted(){
    this.getcourse(1)
    
  }
};
</script>
  
<style>
</style>